<template>
    <div class="cell" @click="onClick">
        <i class="lefticon iconfont" :class="icon"></i>
        <div class="title">
            <span>{{text}}</span>
        </div>
        <i class="righticon iconfont icon-arrow-right-bold" v-show="rightIcon"></i>
    </div>
</template>

<script>
export default {
    name: 'Cell',
    props: {
        icon: {
            type: String
        },
        text: {
            type: String
        },
        rightIcon: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        onClick() {
            this.$emit('click')
        }
    }
}
</script>

<style scoped>
.cell{
    position: relative;
    display: flex;
    width:100%;
    padding:0.2rem 0.32rem;
    color:#333;
    font-size:0.28rem;
    line-height:0.48rem;
    background:#fff;
}
.cell::after{
    content:"";
    position: absolute;
    right:0.32rem;
    left:0.32rem;
    bottom:0;
    border-bottom:1px solid #ebedf0;
    transform:scaleY(0.5);
}
.cell::before{
    content:"";
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:#000;
    opacity:0;
    transition:opacity 0.1s;
}
.cell:active::before{
    opacity:0.1;
}
.cell .lefticon{
    margin-right:0.1rem;
    font-size:0.32rem;
}
.cell .title{
    flex:1;
    font-weight:600;
}
.cell .righticon{
    margin-left:0.1rem;
    color:#999;
}
</style>